<template>
  <el-row class="userCenter">
    <el-col :span="4" style="background-color: white">
      <el-col style="box-shadow:0px 0px 10px 0px rgba(55,64,94,0.3);">
        <el-menu @open="open" style="height: calc(100vh - 50px); overflow: auto; padding: 10px;" :default-active="$route.path" :router="true" class="menuEa" unique-opened>
          <div class="menu" v-for="v in menuList">
            <el-menu-item :index="v.url" v-if="!v.children">
              <template slot="title">
                <i class="el-icon-menu"/>
                <span slot="title" class="firstLevel">{{v.name}}</span>
              </template>
            </el-menu-item>
          </div>
          <div v-for="v in menuList">
            <el-submenu :index="v.url" v-if="v.children">
              <template slot="title">
                <i :class="v.icon"/>
                <span slot="title" class="firstLevel">{{v.name}}</span>
              </template>
              <el-menu-item-group class="menu" v-for="w in v.children">
                <el-submenu :index="w.url" v-if="w.children">
                  <template slot="title">
                    <i class="el-icon-space"/>
                    <span>{{w.name}}</span>
                  </template>
                  <el-menu-item :index="x.url" v-for="x in w.children">
                    <i class="el-icon-space"/>
                    <span>{{x.name}}</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item :index="w.url" v-if="!w.children">
                  <i class="el-icon-space"/>
                  <span>{{w.name}}</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </div>
        </el-menu>
      </el-col>
<!--      <el-menu style="height: 500px" :default-active="$route.path" :router="true" class="menuEa">-->
<!--&lt;!&ndash;        首页&ndash;&gt;-->
<!--        <div class="menu">-->
<!--          <el-menu-item index="/index" >-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-menu"/>-->
<!--              <span slot="title">首页</span>-->
<!--            </template>-->
<!--          </el-menu-item>-->
<!--        </div>-->
<!--&lt;!&ndash;        数据资源&ndash;&gt;-->
<!--&lt;!&ndash;        诊断任务管理&ndash;&gt;-->
<!--&lt;!&ndash;        报告推送&ndash;&gt;-->
<!--&lt;!&ndash;        场站及设备管理&ndash;&gt;-->
<!--        <el-submenu index="/stationEquipment">-->
<!--          <template slot="title">-->
<!--            <i class="el-icon-location"/>-->
<!--            <span slot="title">场站及设备管理</span>-->
<!--          </template>-->
<!--          <el-menu-item-group class="menu">-->
<!--            <el-submenu index="./stations">-->
<!--              <template slot="title">场站管理</template>-->
<!--              <el-menu-item index="./stationInfo">场站信息</el-menu-item>-->
<!--              <el-menu-item index="./matrix">方阵信息</el-menu-item>-->
<!--              <el-menu-item index="./pvModule">光伏组件信息</el-menu-item>-->
<!--              <el-menu-item index="./pvCluster">光伏组串信息</el-menu-item>-->
<!--            </el-submenu>-->
<!--            <el-menu-item index="/stationEquipment/uav">无人机管理</el-menu-item>-->
<!--            <el-menu-item index="/stationEquipment/hangar">机库管理</el-menu-item>-->
<!--            <el-menu-item index="/stationEquipment/robot">机器人管理</el-menu-item>-->
<!--          </el-menu-item-group>-->
<!--        </el-submenu>-->
<!--&lt;!&ndash;        用户权限管理&ndash;&gt;-->
<!--&lt;!&ndash;        用户中心&ndash;&gt;-->
<!--        <div class="menu">-->
<!--          <el-menu-item index="/userCenter" >-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-menu"/>-->
<!--              <span slot="title">用户中心</span>-->
<!--            </template>-->
<!--          </el-menu-item>-->
<!--        </div>-->
<!--      </el-menu>-->
    </el-col>
    <el-col :span="20">
<!--      <el-tabs class="tabs" v-model="editableTabsValue" type="card" closable @tab-click="tabClick" @tab-remove="removeTab">-->
<!--        <el-tab-pane-->
<!--          :key="item.path"-->
<!--          v-for="(item, index) in editableTabs"-->
<!--          :label="item.name"-->
<!--          :name="item.name"-->
<!--        >-->
<!--          <span slot="label"><i class="el-icon-date"></i> {{item.name}}</span>-->
<!--        </el-tab-pane>-->
<!--      </el-tabs>-->
      <transition name="fade-transform" mode="out-in">
        <router-view/>
      </transition>
    </el-col>
  </el-row>
</template>

<script>
import router from "../router"
import homeApi from "../api/homeApi"
export default {
  name: "Index",
  data() {
    return {
      menuList: [],
      menuList1: [
        {name: "首页", url: "/indexPage"},
        { name: "报告推送", url: "/reportPush/diagnosticReportPush", children: [
            { name: "诊断报告推送", url: "/reportPush/diagnosticReportPush" },
            { name: "平台接口管理", url: "/reportPush/api" }
          ] },
        { name: "场站及设备管理", url: "/stationEquipment/stations/stationInfo", children: [
          { name: "场站管理", url: "/stationEquipment/stations/stationInfo", children: [
            { name: "场站信息", url: "/stationEquipment/stations/stationInfo" },
            { name: "方阵信息", url: "/stationEquipment/stations/matrix" },
            { name: "光伏组件信息", url: "/stationEquipment/stations/pvModule" },
            { name: "光伏组串信息", url: "/stationEquipment/stations/pvCluster" }
          ] },
          { name: "无人机管理", url: "/stationEquipment/uav" },
          { name: "机库管理", url: "/stationEquipment/hangar" },
          { name: "机器人管理", url: "/stationEquipment/robot" }
        ] },
        {
          name: "数据资源",
          url: "/dataSource",
          children: [{
            name: "数据上传",
            url: "/dataSource/dataUpload",
            children: [{
              name: "本地上传",
              url: "/dataSource/dataUpload/local"
            }, {
              name: "FTP获取",
              url: "/dataSource/dataUpload/FTP"
            }, {
              name: "FTP平台配置",
              url: "/dataSource/dataUpload/FTPConfig"
            }]
          }, {
            name: "数据资源查询",
            url: "/dataSource/dataSourceList"
          }, {
            name: "任务维护",
            url: "/dataSource/taskMaintain"
          }] },
        { name: "诊断任务管理",
          url: "/diagnosticTask",
          children: [{
            name: "任务启动",
            url: "/diagnosticTask/startTask",
            children: [{
              name: "手动启动",
              url: "/diagnosticTask/startTask/manual"
            }, {
              name: "定时启动",
              url: "/diagnosticTask/startTask/timming"
            }]
          }, {
            name: "任务列表",
            url: "/diagnosticTask/taskList"
          }, {
            name: "结果查询",
            url: "/diagnosticTask/getResult",
            children: [{
              name: "按场站查询",
              url: "/diagnosticTask/getResult/stations"
            }, {
              name: "按方阵查询",
              url: "/diagnosticTask/getResult/matrix"
            }, {
              name: "按组件查询",
              url: "/diagnosticTask/getResult/pvModule"
            }, {
              name: "按组串查询",
              url: "/diagnosticTask/getResult/pvCluster"
            }]
          }]
        }
      ],
      editableTabsValue: "",
      editableTabs: [] // 结构：{name: this.$router.name, path: this.$router.path}
    }
  },
  methods: {
    tabClick() {
      this.$router.push(this.editableTabs.find(item => item.name === this.editableTabsValue).path)
    },
    removeTab(name) {
      const index = this.editableTabs.findIndex(item => item.name === name)
      if (this.editableTabs.length > 1) { // 判断有大于1个标签时才允许删除
        if (this.editableTabs[index].name === this.$route.name) { // 当前路由是否与删除路由相同，相同则跳转到前一路由
          this.$router.push(this.editableTabs[index-1].path)
        }
        this.editableTabs.splice(index, 1)
      }
    },
    getMenuList() {
      homeApi.loadUserMenus().then(data => {
        // console.log("data", data)
        // this.menuList = this.menuList1
        this.menuList = data.data.data
      }).catch(e => {
          this.$message.error({message: e.message ? e.message : e, center: true})
      })
    },
    open(index) {
      // console.log("index", index)
      // console.log("this.menuList", this.menuList)
      // const menuItem = this.menuList.find(item => item.url = index)
      // console.log("menuItem", menuItem)
      // if (menuItem.children[0].children) {
      //   console.log("menuItem.children[0].children", menuItem.children[0].children)
      //   this.$router.push(menuItem.children[0].children[0].url)
      // } else {
      //   console.log("menuItem.children[0].url", menuItem.children[0].url)
      //   this.$router.push(menuItem.children[0].url)
      // }
    }
  },
  mounted() {
    this.getMenuList()
    this.editableTabs.push({name: this.$route.name, path: this.$route.path})
    this.editableTabsValue = this.$route.name
    router.afterEach((to, form) => {
      if (!this.editableTabs.find(item => item.path === to.path)) {
        this.editableTabs.push({name: to.name, path: to.path})
      }
      this.editableTabsValue = to.name
    })
  }
}
</script>

<style lang="scss">
  .userCenter{
    /*.el-tabs__header{*/
    /*  background-color: #04638B;*/
    /*}*/
    /*.el-tabs--card>.el-tabs__header .el-tabs__item{*/
    /*  border: 0;*/
    /*}*/
    /*.el-tabs--card>.el-tabs__header{*/
    /*  border: 0;*/
    /*}*/
    /*.el-tabs--card>.el-tabs__header .el-tabs__nav{*/
    /*  border: 0;*/
    /*}*/
    /*.tabs{*/
    /*  .el-tabs__nav{*/
    /*    .is-active{*/
    /*      background-color: rgba(0,153,255,0.5);*/
    /*      border-top-left-radius: 5px;*/
    /*      border-top-right-radius: 5px;*/
    /*      color: white;*/
    /*    }*/
    /*  }*/
    /*}*/
    /*.el-menu-item-group__title{*/
    /*  padding: 0;*/
    /*}*/
    /*.el-submenu{*/
    /*}*/
    /*.el-form-item__label{*/
    /*  color: #38E5FF;*/
    /*}*/
    /*.el-input__inner{*/
    /*  !*border-color: rgb(50,229,250);*!*/
    /*  border-color: rgb(6,92,138);*/
    /*}*/
    /*.el-input.is-active .el-input__inner, .el-input__inner:focus{*/
    /*  border-color: rgb(50,229,250);*/
    /*}*/
    /*.el-tabs__header{*/
    /*  margin: 0;*/
    /*}*/
    /*.is-active{*/
    /*  .el-submenu__title{*/
    /*    font-weight: bold;*/
    /*  }*/
    /*}*/
    /*.menuEa{*/
    /*  li span,i{*/
    /*    color: rgba(255,255,255,0.6);*/
    /*  }*/
    /*  .is-active{*/
    /*    i {*/
    /*      color: white;*/
    /*    }*/
    /*    span{*/
    /*      color:rgba(255,255,255,1);*/
    /*    }*/
    /*  }*/
    /*}*/
      /*li,i{*/
      /*  color: rgba(255,255,255,0.6);*/
      /*}*/
    /*ul{*/
    /*  padding-left: 20px;*/
    /*  li {*/
    /*    padding: 0;*/
    /*  }*/
    /*}*/
      .is-active{
        ul, div, li{
          background-color: #E4EFFF;
          color: #3977F3;
          font-weight: normal;
        }
        i {
          color: #3977F3;
        }
        border-radius: 4px;
        background-color: #3977F3!important;
        color: white!important;
        font-weight: bold!important;
      }
    .el-menu-item{
      margin: 0 5px;
    }
    .el-submenu .el-menu-item{
      height: 40px;
      line-height: 40px;
    }
    .firstLevel{
      font-size: 17px;
    }
    #app .hideSidebar .el-submenu>.el-submenu__title .el-submenu__icon-arrow{
      display: block!important;
    }
  }
</style>
